<!doctype html>
<html lang="en">

<head>
</head>

<body class="fixed">
    <div class="row">
        <div class="col-lg-6">
            <div class="card mb-4 mb-lg-0">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="fs-17 font-weight-600 mb-0">网关信息配置</h6>
                            <h8 class="fs-12 font-weight-400 mb-0">当前连接设备IP：192.168.1.1</h8>
                        </div>
                        <div class="text-right">
                            <button id="scanButton" class="btn btn-primary btn-lg" data-toggle="modal"
                                data-target="#subscribeModal">扫描设备</button>
                            <!-- <div class="actions">
                                <a href="#" class="action-item"><i class="ti-reload"></i></a>
                                <div class="dropdown action-item" data-toggle="dropdown">
                                    <a href="#" class="action-item"><i class="ti-more-alt"></i></a>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <a href="#" class="dropdown-item">Refresh</a>
                                        <a href="#" class="dropdown-item">Manage Widgets</a>
                                        <a href="#" class="dropdown-item">Settings</a>
                                    </div>
                                </div>
                            </div> -->
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <form>
                        <div class="form-group">
                            <label for="gatewayAddrInput" class="font-weight-600">设置设备IP地址</label>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" id="gatewayAddrInput"
                                    aria-describedby="gatewayAddrHelp" placeholder="IP地址" >
                                <div class="input-group-append">
                                    <button class="btn btn-primary" type="button">连接读取</button>
                                </div>
                            </div>
                            <small id="gatewayAddrHelp" class="form-text text-muted">请输入IP地址或使用自动扫描选择</small>
                        </div>
                        <div class="form-group">
                            <label for="gatewayNetmaskInput" class="font-weight-600">设置设备子网掩码</label>
                            <input type="text" class="form-control" id="gatewayNetmaskInput"
                                aria-describedby="gatewayNetmaskHelp" placeholder="IP地址" />
                            <small id="gatewayNetmaskHelp" class="form-text text-muted">请输入子网掩码</small>
                        </div>
                        <div class="form-group">
                            <label for="gatewayGatewayInput" class="font-weight-600">设置设备网络网关</label>
                            <input type="text" class="form-control" id="gatewayGatewayInput"
                                aria-describedby="gatewayGatewayHelp" placeholder="IP地址" />
                            <small id="gatewayGatewayHelp" class="form-text text-muted">请输入IP地址或使用自动扫描选择</small>
                        </div>
                        <div class="form-group">
                            <label for="gatewayDNSInput" class="font-weight-600">设置设备DNS</label>
                            <input type="text" class="form-control" id="gatewayDNSInput"
                                aria-describedby="gatewayDNSHelp" placeholder="IP地址" />
                            <small id="gatewayDNSHelp" class="form-text text-muted">请输入IP地址或使用自动扫描选择</small>
                        </div>
                        <div class="form-group">
                            <label for="gatewayTypeSelect" class="font-weight-600">连接类型</label>
                            <select name="somename" class="form-control form-control-lg mt-2" id="gatewayTypeSelect">
                                <option value="net" selected="selected">网口</option>
                                <option value="wifi">WIFI</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="gatewayClientIDInput" class="font-weight-600">设备名称（客户端ID）</label>
                            <input type="text" class="form-control" id="gatewayClientIDInput" placeholder="设备名称" />
                        </div>
                        <div class="form-group">
                            <label for="gatewayServerIPInput" class="font-weight-600">服务器IP</label>
                            <input type="text" class="form-control" id="gatewayServerIPInput"
                                placeholder="xxx.xxx.xxx.xxx:0000" />
                        </div>
                        <div class="form-group">
                            <label for="gatewayComRateSelect" class="font-weight-600">串口波特率</label>
                            <select name="somename" class="form-control form-control-lg mt-2" id="gatewayComRateSelect">
                                <option value="4800">4800</option>
                                <option value="9600" selected="selected">9600</option>
                                <option value="19200">19200</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="gatewayDataTypeSelect" class="font-weight-600">数据格式</label>
                            <select name="somename" class="form-control form-control-lg mt-2"
                                id="gatewayDataTypeSelect">
                                <option value="0" selected="selected">8;None;1</option>
                                <option value="1">8;None;2</option>
                                <option value="2">8;Odd;1</option>
                                <option value="3">8;Odd;2</option>
                                <option value="4">8;Even;1</option>
                                <option value="5">8;Even;2</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-success">修改并下载到设备</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card mb-4">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="fs-17 font-weight-600 mb-0">网关固件上传</h6>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p><strong>选择文件</strong> 请将固件拖动到此处或点击空白处上传
                    </p>
                    <form action="#" class="dropzone" id="dropzoneForm">
                        <div class="fallback">
                            <input name="file" type="file" multiple />
                        </div>
                    </form>
                </div>
            </div>
            <div class="card mb-4">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="fs-17 font-weight-600 mb-0">网关固件升级</h6>
                            <h8 class="fs-12 font-weight-400 mb-0">当前连接设备IP：192.168.1.1</h8>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label for="gatewayTypeSelect" class="font-weight-600">固件列表</label>
                        <select name="somename" class="form-control form-control-lg mt-2" id="gatewayTypeSelect">
                            <option value="net" selected="selected">网口</option>
                            <option value="wifi">WIFI</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-success">升级当前设备</button>
                </div>
            </div>
        </div>
        <!--/.body content-->
        <!--/.main content-->
        <div class="overlay"></div>
        <!--/.wrapper-->
        <div class="modal fade subscribe-modal text-center" id="subscribeModal" tabindex="-1" role="dialog"
            aria-hidden="false">
            <div class="modal-dialog modal-dialog-vertical" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title font-weight-bold">请选择设备</h6>
                    </div>
                    <div class="modal-body">
                        <ul class="list-group">
                            <button type="button" class="btn btn-block btn-social btn-twitter">
                                <!-- <i class="fab fa-twitter"></i> --> Item a
                            </button>
                            <button type="button" class="btn btn-block btn-social btn-twitter">
                                <!-- <i class="fab fa-twitter"></i> --> Item b
                            </button>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>